<template>
    <div style="border: 2px solid;">
        <h1 style="color:red">Count组件求和结果：{{ sum }}</h1>
        <h3>列表中第一个人的名字：<br/>mapGetters方式获取==>{{ firstPersonName }} <br/>this.$store方式获取==>{{ firstPersonName2 }}</h3>
        <h1>人员列表</h1>
        <input type="text" placeholder="请输入名字" v-model="name">
        <button @click="addPerson()">添加</button>
        <button @click="addPersonWang()">这个按钮只能添加姓王的人</button>
        <button @click="addPersonServer()">添加一个人，名字随机</button>
        <ul>
            <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
        </ul>
    </div>
</template>

<script>
import Vue from 'vue';
import { mapGetters, mapState } from 'vuex';
import { nanoid } from 'nanoid'
export default Vue.extend({
    name: 'Person',
    data() {
        return {
            name: "",
        }
    },
    computed: {
        sum(){
            return this.$store.state.count.sum
        },
        personList() {
            console.log(this.$store);
            return this.$store.state.person.personList
        },
        ...mapGetters('person', { 'firstPersonName': 'firstPersonName' }), // 等效于下面的代码
        firstPersonName2() {
            // getters 中 有namespaced 会以目录样式呈现：person/firstPersonName
            // 因为 person/firstPersonName 带有 '/' 这个字符，所以只能用 getters['xxx'] 这样获取到
            return this.$store.getters['person/firstPersonName']
        }
    },
    methods: {
        addPerson() {
            const personObj = { id: nanoid(), name: this.name }
            this.$store.commit('person/ADD_PERSON', personObj) // 用 person/ 表示这个mutations在person下找
            this.name = ''
        },
        addPersonWang() {
            const personObj = { id: nanoid(), name: this.name }
            this.$store.dispatch('person/addPersonWang', personObj)
            this.name = ''
        },
        addPersonServer(){
            this.$store.dispatch('person/addPersonServer')
        }
    }
})
</script>